<script setup lang="tsx">
import { ContentWrap } from "@/components/ContentWrap";
import { Search } from "@/components/Search";
import { Table } from "@/components/Table";
import type { DepartmentItem } from "@/api/department/types";
import { useTable } from "@/hooks/web/useTable";
import { ref, unref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { routeList } from "@/api/resource-manage";
import { useCrudSchemas } from "@/hooks/web/useCrudSchemas";
import { BaseButton } from "@/components/Button";
import { Dialog } from "@/components/Dialog";
import Write from "./components/Write.vue";
import crudSchemas, {
  getDataInstance,
  getRouterInstance,
  setMountType,
  getAirportList,
  airportArr,
} from "./config/index";
import { routeAdd, routeEdit, routeDelete} from "@/api/resource-manage";
import { ElMessage } from "element-plus";

const dialogVisible = ref(false);
const dialogTitle = ref("");
const actionType = ref("");

onMounted(() => {
  setMountType();
  getAirportList();
});

// 注册列表页函数
const { tableRegister, tableState, tableMethods } = useTable({
  // 列表查询
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState;
    const res = (await routeList({
      page: unref(currentPage),
      limit: unref(pageSize),
      ...unref(searchParams),
    })) as any;

    return {
      list: res.data.records,
      total: res.data.total,
    };
  },
  //删除
  fetchDelApi: async (routeId: number | string) => {
    const res = await routeDelete({ routeId });
    return !!res;
  },
});
const { loading, dataList, total, currentPage, pageSize } = tableState;

const { getList, delList } = tableMethods;

const searchParams = ref({});

// 查询
const setSearchParams = (params: any) => {
  searchParams.value = params;
  getList();
};

// 获取data对象
getDataInstance(
  reactive({
    dialogTitle,
    dialogVisible,
    actionType,
  })
);

// 载入路由
const router = useRouter();
getRouterInstance(router);

// 入口解析页面config
const { allSchemas } = useCrudSchemas(crudSchemas);

const rowData = ref({});
let infoType= ref('add')
// 新增
const AddAction = () => {
  dialogVisible.value = true;
  dialogTitle.value = "新增";
  infoType.value ='add';
};
// 编辑
const hanleAction = (row: any, type: string) => {
  rowData.value = row;
  dialogTitle.value = "编辑";
  infoType.value =type;
  console.log(rowData,infoType)
  dialogVisible.value = true;
};

const writeRef = ref<ComponentRef<typeof Write>>();

//  报错
const save = async () => {
  const write = unref(writeRef);
  console.log('write',write)
  const formData = await write?.submit();
  if (dialogTitle.value === "新增") {
    const { msg } = (await routeAdd(formData)) as any;
    ElMessage.success(msg);
    dialogVisible.value = false;
  } else {
    const { msg } = (await routeEdit(formData)) as any;
    ElMessage.success(msg);
    dialogVisible.value = false;
  }
  currentPage.value = 1;
  getList();
};

const delData = async (row) => {
  console.log(row);
  loading.value = true;
  await delList(unref(row.id)).finally(() => {
    loading.value = false;
  });
};

// 获取data对象
getDataInstance(
  reactive({
    hanleAction,
    delData,
  })
);
</script>

<template>
  <ContentWrap>
    <Search
      :schema="allSchemas.searchSchema"
      @search="setSearchParams"
      @reset="setSearchParams"
    />

    <div class="mb-10px">
      <BaseButton type="primary" @click="AddAction">新增 </BaseButton>
    </div>

    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total: total,
      }"
      @register="tableRegister"
    />
  </ContentWrap>

  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <Write ref="writeRef" :airport="airportArr" :data="rowData" :type="infoType"/>
    <template #footer>
      <BaseButton type="primary" @click="save"> 保存 </BaseButton>
      <BaseButton @click="dialogVisible = false">关闭</BaseButton>
    </template>
  </Dialog>
</template>
